<template>
	<div>
		<br>
		<el-form :inline="true">
			<el-form-item label="客户名称">
				<el-input v-model="searchMap.supplier"></el-input>
			</el-form-item>
			<el-form-item label="手机号码">
				<el-input v-model="searchMap.telephone"></el-input>
			</el-form-item>
			<el-button type="primary" @click="searchData()">查询</el-button>
			<el-button type="primary" @click="handleEdit('')">新增</el-button>
		</el-form>
		<br/>
	  <el-table
	    :data="list"
	    border>
		
	    <el-table-column
	      prop="supplier"
	      label="名称"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="contacts"
	      label="联系人"
	      width="120">
	    </el-table-column>
	    <el-table-column
	      prop="telephone"
	      label="手机号码"
	      width="180">
	    </el-table-column>
	    <el-table-column
	      prop="email"
	      label="电子邮箱"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="phonenum"
	      label="联系电话"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="allneedget"
	      label="累计应收"
	      width="120">
	    </el-table-column>
		<el-table-column
		  prop="allneedpay"
		  label="累计应付"
		  width="120">
		</el-table-column>
		 <el-table-column
		   label="操作"
		   width="100">
		   <template slot-scope="scope">
			<el-button @click="handleEdit(scope.row.id)" type="text" size="small">编辑</el-button>
			<el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
		   </template>
		 </el-table-column>	      <!-- fixed="left" -->
	  </el-table>
	  
	  <el-pagination
	        @size-change="fetchData"
	        @current-change="fetchData"
	        :current-page="currentPage"
	        :page-sizes="[5,10, 20, 30]"
	        :page-size="10"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="total">
	  </el-pagination>
	  
	  <el-dialog
	    title="编辑"
	    :visible.sync="dialogVisible"
	    width="30%"
	    :before-close="handleClose">
	  
	    <el-form label-width="80px">
			<el-form-item label="客户">
				<el-input v-model="pojo.supplier"></el-input>
			</el-form-item>
			<el-form-item label="联系人">
				<el-input v-model="pojo.contacts"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="pojo.telephone"></el-input>
			</el-form-item>
			<el-form-item label="电子邮件">
				<el-input v-model="pojo.email"></el-input>
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input v-model="pojo.phonenum"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input
				  type="textarea"
				  :rows="2"
				  placeholder="请输入内容"
				  v-model="pojo.remark">
				</el-input>
			</el-form-item>
			<el-form-item label="是否设为默认账户">
				<el-switch
				  v-model="pojo.state"
				  active-value="true"
				  inactive-value="false">
				</el-switch>
			</el-form-item>
		</el-form>
	    <span slot="footer" class="dialog-footer">
	      <el-button @click="dialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="handleSave()">确 定</el-button>
	    </span>
	  </el-dialog>
	</div>
</template>

<script>
	import supplierApi from '@/api/supplier'
	export default{
		data(){
			return{
				list:[],
				type:'客户',
				total:0,			//总记录数
				currentPage:1,		//当前页
				pageSize:10,		//每页大小
				searchMap:{'type':'客户'},		//查询条件
				dialogVisible: false,//对话框是否可见
				pojo:{"type":'客户'},//表单绑定的属性
				id:''
			}
		},
		created() {
			this.fetchData()
		},
		methods:{
			fetchData(){
				supplierApi.findAll(this.type,this.currentPage,this.pageSize).then(response=>{
					this.list=response.data.rows
					this.total=response.data.total
				})
			},
			searchData(){
				supplierApi.search(this.searchMap,this.currentPage,this.pageSize).then(response=>{
					this.list=response.data.rows
					this.total=response.data.total
				})
			},
			handleSave(){
				supplierApi.update(this.id,this.pojo).then(response=>{
					this.$message({
						message:response.message,
						type:'success'
					});
					if(response.flag){
						this.fetchData()
					}
				})
				this.dialogVisible=false
			},
			handleEdit(id){
				this.dialogVisible=true
				this.id=id
				if(id!=''){
					supplierApi.findById(id).then(response=>{
					if(response.flag)
					  this.pojo=response.data
					  })
				}else{
					  this.pojo={"type":'客户'}
				  }
			},
			handleDelete(id){
				this.$confirm('确定要删除此纪录吗？','提示',{
					confirmButtonText:'确定',
					cancelButtonTexxt:'取消',
					type:'warning'
				}).then(()=>{
					supplierApi.deleteById(id).then(response=>{
						this.$message({
							message:response.message,
							type:'success'
						});
						this.fetchData()
					})
				})
				
			}
		}
	}
</script>

<style>
</style>
